<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式列表</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        .Modular {
            width: 100%;
            margin: 0px 0px 10px 0px;
            padding: 15px 0px;
            background: #fff;
        }

        .Modular > div {
            width: 80%;
            margin: auto;
        }

        .layui-row {
            margin-top: 20px !important;
        }

        .layui-col {
            float: left;
            width: 18% !important;
            margin-left: 2.5%;
            cursor: pointer;
        }

        .layui-col2 {
            height: 260px;
            flex: 0 0 25%;
            padding-right: 10px;
            padding-left: 10px;
            cursor: pointer;
            box-sizing: border-box;
        }

        .layui-col img, .layui-col2 img {
            width: 100%;
        }

        .layui-col:hover {
            opacity: .8;
        }

        .app {
            width: 100%;
        }

        .app_title {
            width: 160px;
            margin: auto;
            font-size: 18px;
        }

        .app_title_b {
            font-weight: bold;
            padding-right: 10px;
        }

        .app_list {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .app_list_imfor {
            width: 100%;
            height: 45px;
            background: #fff;

        }

        .layui-col2-card {
            box-shadow: 0 4px 11px 0px #bbbbbb;
        }

        .layui-col2-card:hover {
            -moz-transform: scale(1.05, 1.05);
            -webkit-transform: scale(1.05, 1.05);
            -o-transform: scale(1.05, 1.05);
        }

        .app_list_imfor_name {
            display: inline-block;
            width: 50%;
            height: 40px;
            float: left;
            line-height: 40px;
            text-indent: 10px;
            font-weight: bold;
        }

        .app_list_imfor_data {
            display: inline-block;
            width: 50%;
            height: 40px;
            line-height: 40px;
        }

        .app_list_imfor_data > div {
            float: right;
            margin-right: 10px;
        }

        .exp_app {
            width: 100%;
        }

        .exp_app_title {
            width: 160px;
            margin: auto;
            font-size: 18px;
        }

        .exp_app_title_b {
            font-weight: bold;
            padding-right: 10px;
        }

        .exp_app_list {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .exp_app_list_imfor {
            width: 100%;
            height: 45px;
            background: #fff;

        }

        .app_list_imfor_name {
            display: inline-block;
            width: 55%;
            max-width: 190px;
            height: 40px;
            float: left;
            line-height: 40px;
            text-indent: 10px;
            font-weight: bold;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .app_list_imfor_data {
            display: inline-block;
            width: 45%;
            height: 40px;
            line-height: 40px;
        }

        .exp_app_list_imfor_data > div {
            float: right;
            margin-right: 10px;
        }

        .layui-elem-quote {
            background: unset !important;
            font-size: 16px;
            font-weight: bold;
            color: #868686;
            border-left: 5px solid #1E9FFF;
            line-height: 0px;
            margin-left: 10px;
        }
        #app-score{
            width: 160px;
            position: absolute;
            height: 40px;
            line-height: 20px;
            padding: 0px 10px;
            background-color: #ffffff;
            border-radius: 3px;
            box-shadow: 0 4px 11px 0px #bbbbbb;
            margin-top: -40px;
        }
        .layui-rate li i.layui-icon{
            color:#1E9FFF
        }
        .collect{
            box-sizing: border-box;
            padding-top: 2px;
        }
        .operate{
            position: absolute;
            right:200px;
            top: 10px;
            width: 350px;
            height:40px;
            z-index: 99;
        }
        .screen{
            font-size: 14px;
            text-align: center;
            float: right;
            margin: 13px;
            cursor: pointer;
        }
        .screen:hover{
            color: #1E9FFF;
        }
        .red{
            color: #c00;
        }
        .scrBox{
            width:120px;
            /* height:160px; */
            background: #eaeaea;
            margin-top: 40px;
            margin-left: 140px;
            box-sizing: border-box;
            padding-top: 10px;
            /* display: none; */
        }
        .scrBox ul li{
            width: 100%;
            height:30px;
            line-height: 30px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
        }    
        .scrBox ul li:hover{
            background: #1E9FFF;
            color: #fff;
        }
        .sortBox{
            width:100%;
            margin-top: 40px;
            overflow: hidden;
            box-sizing: border-box;
            padding: 10px;
            background: #eaeaea;
            /* display: none; */
        }
        .sortBox ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .sortBox ul li{
            width: 30%;
            height: 32px;
            line-height: 32px;
            background: #fff;
            font-size: 12px;
            text-align: center;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .sortBox ul li:hover{
            background: #1E9FFF;
            color: #fff;
        }
        .hide{
            display: none;
        }
        .bg{
            background: #1E9FFF !important;
            color: #fff !important;  
        }
        .layui-form-select dl dd.layui-this{
            background-color: #00aeff !important;
        }
        .layui-form-radioed>i, .layui-form-radio>i:hover {
            color: #00aeff !important;
        }
    </style>
</head>
<body style="width: 100%;padding: 0px; background-color: #eaeaea;">
<div class="Modular">
    <div class="vector">
        <div>
            <blockquote class="layui-elem-quote">矢量数据样式</blockquote>
            <div class="operate">
                <i class="layui-icon" style="font-size: 20px;float: right;margin:10px ">&#xe60e;</i>
                <i class="layui-icon" style="font-size: 20px;float: right;margin:10px;color: #FF5722;padding-left: 20px;border-left: 5px solid #c0c0c0;">&#xe756;</i>
                <div class="screen" id="screen">筛选</div>
                <div class="screen" id="sort">分类</div>
                <div class="scrBox hide">
                    <ul>
                        <li>时间</li>
                        <li>全部</li>
                        <li>最近24小时</li>
                        <li>最近一周</li>
                        <li>最近一个月</li> 
                    </ul>
                </div>
                <div class="sortBox hide">
                    <ul>
                        <li>建筑</li>
                        <li>数据展示</li>
                        <li>智慧水利</li>
                        <li>城市规划</li>
                        <li>交通安全</li>
                        <li>智慧电信</li>
                        <li>应急预案</li>
                        <li>基础测绘</li>
                        <li>智慧公安</li>
                        <li>功能演示</li>
                        <li>地下管网</li>
                        <li>智慧社区</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="app_list"></div>
    </div>
</div>

<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
    $(function () {

        //点击列表跳转详情页
        $('.app_list').on('click','.layui-col2-card',function () {
            //获取当前样式的id
            var id = $(this).attr('cId');
            parent.document.getElementById('view').src = "HTML/comment.html?id="+id+'&type=3';
        })

        // 点击评论
        $('.Modular').on('click','.comments',function () {
            //获取当前样式的id
            var id = $(this).parent().parent().parent().attr('cId');
            parent.document.getElementById('view').src = "HTML/comment.html?id="+id+'&comment=1&type=3'
        })
    })
    var rate = null;
    layui.use(['element','rate','flow'], function () {
        var element = layui.element,
            flow = layui.flow;

        //获取样式列表
        var param = {
            'condition': {
                'status': 1,
                'userid': parent.isLogin ? parent.getLocalStorage('JSXM').id : 0,
                'groupid':0
            },
        };
        parent.getFlowDataByPost(parent.defaultUrl+'/style/selAllStyleByUser',param,1,flow,getList,'vector');
    });

    // 筛选以及分类弹窗
    $(document).ready(function(){
        $("#screen").click(function(e){
            e.stopPropagation();
            $(".sortBox").addClass("hide");
            if($('.scrBox').hasClass('hide')){
                $(".scrBox").removeClass("hide");
            }else{
                $(".scrBox").addClass("hide");
            }
        });
        $("#sort").click(function(e){
            e.stopPropagation();
            $(".scrBox").addClass("hide");
            if($('.sortBox').hasClass('hide')){
                $(".sortBox").removeClass("hide");
            }else{
                $(".sortBox").addClass("hide");
            }
        });
        $('.scrBox ul li').click(function () { 
            $(this).addClass('.bg').siblings('li').removeClass('.bg')
        })
        $('.sortBox ul li').click(function () { 
            $(this).addClass('.bg').siblings('li').removeClass('.bg')
        })
        $(document).click(function(e){
            // console.log(e.target.tagName)
            if(e.target.tagName == 'LI'){

            }else{
                $(".scrBox").addClass("hide");
                $(".sortBox").addClass("hide");
            } 
        });
    });
    
    //数据生成html
    function getList(data,type) {
        var html = '';
        for (var i = 0,l = data.length;i<l;i++) {
            var img = data[i].img || JSON.parse(data[i].content).img ;
            html += '            <div class="layui-col2">\n' +
                '                <div cId="'+data[i].id+'" class="layui-col2-card" style="position: relative;">\n' +
                '                    <img class="AppImg" src="'+img+'">\n' +
                '                    <div class="app_list_imfor">\n' +
                '                        <div class="app_list_imfor_name">'+data[i].name+'</div>\n' +
                '                        <div class="app_list_imfor_data">\n' +
                '                            <div class="comments">\n' +
                '                                <i class="layui-icon">&#xe63a;</i><!--评论-->\n' +
                '                                <span>'+data[i].commentnum+'</span>\n' +
                '                            </div>\n' +
                '                            <div class="icon-socre">\n' +
                '                                <i class="layui-icon">&#xe67b;</i><!--评分-->\n' +
                '                                <span>'+data[i].score+'</span>\n' +
                '                            </div>\n' +
                '                            <div class="collect">\n' ;
                    if (data[i].isfavour) {
                        html += '<span class="iconfont iconshoucang red" style="font-size: 20px;"></span><!--收藏-->';
                    } else {
                        html += '<span class="iconfont iconshoucang" style="font-size: 20px;"></span><!--收藏-->';
                    }

                html += '                            </div>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>'
        }
        $('.app_list').append(html);
    }
   
</script>
</body>
</html>